import { Button, Space, Tooltip } from "antd"
import { EditOutlined, DeleteOutlined } from "@ant-design/icons"
import type { ColumnsType } from "antd/lib/table"
// 编程式导航hook
import { useNavigate } from "react-router-dom"
//接口位置统一，引入使用
import { IhospitalSetItem } from "@api/hospitalSet/model"

export function useColumns(onDelete: any) {
  const navigate = useNavigate()
  // 数组中写多少个，就有多少列，里面的对象则表示每一列具体渲染哪些内容
  // 使用接口约束内部数据格式
  const columns: ColumnsType<IhospitalSetItem> = [
    {
      title: "序号",
      /**
       * @param text 当前文本
       * @param record 当前行对应的数据的对象
       * @param index 下标
       * @return return什么这一列就显示什么
       */
      render: (text, record, index): any => {
        return index + 1
      },

      // 设置第一列的样式
      width: 70,
      align: "center",
    },
    {
      title: "医院名称",
      dataIndex: "hosname",
    },
    {
      title: "医院编号",
      dataIndex: "hoscode",

      align: "center",
    },
    {
      title: "api基础路径",
      dataIndex: "apiUrl",
    },
    {
      title: "签名",
      dataIndex: "signKey",

      align: "center",
    },
    {
      title: "联系人姓名",
      dataIndex: "contactsName",

      align: "center",
    },
    {
      title: "联系人手机",
      dataIndex: "contactsPhone",

      align: "center",
    },
    {
      title: "操作",
      key: "action",
      render: (text) => (
        <Space size="middle">
          <Tooltip placement="top" title="修改医院">
            <Button
              type="primary"
              icon={<EditOutlined />}
              onClick={() => {
                // 页面跳转到add
                navigate(`/syt/hospital/hospitalSet/add`, { state: text })
              }}
            ></Button>
          </Tooltip>
          {/*Tooltip提示框，placement设置位置，title为显示位置  */}
          <Tooltip placement="top" title="删除医院">
            <Button
              type="primary"
              danger
              icon={<DeleteOutlined />}
              onClick={() => {
                onDelete(text.id)
              }}
            ></Button>
          </Tooltip>
        </Space>
      ),
      // 将操作列固定在右侧
      fixed: "right",
    },
  ]

  return columns
}
